<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入vue这个包-->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		
		
		<table id="studentList">
			
			<!--表头是固定的-->
			<tr>
				<td>姓名</td>
				<td>迟到日期</td>
			</tr>
			
			
			<!-- 而表格中的数据是从数据库中取出来  现在我仅仅在前端模拟-->
			<!-- <tr>
				<td>周海燕</td>
				<td>2021-11-05</td>
			</tr>
			
			<tr>
				<td>李伟伟</td>
				<td>2021-11-07</td>
			</tr> -->
			
			<tr v-for="student in studentList">
				<td>{{student.studentName}}</td>
				<td>{{student.delayDate}}</td>
			</tr>
			
		</table>
		
		<table id="studentList1">
			
			<!--表头是固定的-->
			<tr>
				<td>姓名1</td>
				<td>迟到日期1</td>
			</tr>
			
			
			<!-- 而表格中的数据是从数据库中取出来  现在我仅仅在前端模拟-->
			<!-- <tr>
				<td>周海燕</td>
				<td>2021-11-05</td>
			</tr>
			
			<tr>
				<td>李伟伟</td>
				<td>2021-11-07</td>
			</tr> -->
			
			<tr v-for="student in studentList">
				<td>{{student.studentName}}</td>
				<td>{{student.delayDate}}</td>
			</tr>
			
		</table>
		
		
	</body>
	
	<script>
	
		var \={
				studentList:[{
					studentName:'周海燕',
					delayDate:'2021-11-05'
				},{
					studentName:'李伟伟',
					delayDate:'2021-11-08'
				}],
			}
	
		var car = new Vue({
			
			el:'#studentList',
			data:abc,
		});
		
		new Vue({
			
			el:'#studentList1',
			data:abc,
		});
	
	</script>
</html>
